<template>
  <div>
    <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店整改</el-breadcrumb-item>
        <el-breadcrumb-item>详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <c-list v-loading="dataLoading" :column="3">
      <c-list-item label="发起人类型" dict-type-code="SPONSOR_TYPE" :value="formData.sponsorType" />
      <c-list-item label="整改发起人" :value="formData.sponsorNo" />
      <c-list-item label="整改发起人电话" :value="formData.sponsorPhone" />
      <c-list-item label="数据来源" dict-type-code="DATA_FROM" :value="formData.dataSource " />
      <c-list-item label="BPM申请单号" :value="formData.processInstanceNo||'暂无'" />
    </c-list>
    <c-list :column="1">
      <c-list-item label="整改原因" :value="formData.reason" />
    </c-list>
    <c-list v-loading="dataLoading" :column="3">
      <c-list-item label="是否下发通知" dict-type-code="BOOLEANS" :value="formData.isNotice" />
      <c-list-item label="整改通知编号" :value="formData.noticeCode||'无'" />
      <c-list-item label="整改通知下发时间" :value="formData.noticeIssuedTime" />
      <c-list-item label="要求整改时间" :value="formData.claimTime" />
      <c-list-item label="预计卖场报图面积" :value="formData.shopPicArea" />

      <c-list-item label="预计门头报图面积" :value="formData.dheadPicArea" />
      <c-list-item label="预计开业时间" :value="formData.expectOpenTime" />
      <c-list-item label="未整改考核措施" dict-type-code="ASSESSMENT_MEASURES" :value="formData.assessmentMeasures" />
      <c-list-item label="门店编码" :value="formData.shopCode" />
      <c-list-item label="门店名称" :value="formData.shopName" />
      <c-list-item label="客户编码" :value="formData.customerCode" />
      <c-list-item label="所属客户" :value="formData.customerName" />
      <c-list-item label="所属办事处" :value="formData.officeName" />
      <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="formData.shopBizState" />
      <c-list-item label="客户营业状态" dict-type-code="SHOP_BIZ_STATE" :value="formData.customerBizState" />
      <c-list-item label="门店停业时间" :value="formData.shopClosedTime||'暂无'" />
      <c-list-item label="客户取缔时间" :value="formData.customerBanTime||'暂无'" />

      <c-list-item label="成品销售冻结" dict-type-code="BOOLEANS" :value="formData.proSaleFreeze" />
      <c-list-item label="定制销售冻结" dict-type-code="BOOLEANS" :value="formData.customizeSaleFreeze" />
      <c-list-item label="门店建设项目号" :value="formData.constCode" />
      <c-list-item label="门店建设进度" dict-type-code="BEFORE_CONST_SCHEDULE" :value="formData.constSchedule" />
      <c-list-item label="实际处理结果" dict-type-code="ACTUAL_PROCESS_RESULT" :value="formData.actualProcessResult" />
      <c-list-item label="实际整改达成时间" :value="formData.actualReachTime" />
      <c-list-item label="门店整改是否完成" dict-type-code="BOOLEANS" :value="formData.isEnd" />

    </c-list>
    <c-list :column="1">
      <!-- <c-list-item label="跟进情况反馈" :value="formData.followFeedback" /> -->
      <c-list-item type="textarea" :span="3" label="跟进情况反馈" :value="formData.followFeedback" />

    </c-list>

    <div class="qup-title-box"><span class="border" /><span>升级改造附件</span></div>
    <div style="margin-bottom:20px;">
      <template>
        <table-box
          ref="refDesignFile"
          :table-config="fileDataConfig"
          :table-height="200"
          :data="fileData"
          show-index
        />
      </template>
    </div>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="[previewImg]"
    />
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import { filterURL } from '@/utils'
import { getShopAttachment } from '@/api/common.js'
import { queryById } from '@/api/shopUpgrade'
import BackPageMixin from '@/mixins/backPage'
export default {
  name: 'DetailStoreUpgrade',
  components: { ElImageViewer },
  mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dataLoading: false,
      imgDialogVisible: false,
      previewImg: '',
      url: '/pdf-file/',
      fileData: [], // 附件信息
      formRules: {},
      fileDataConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'attachmentType',
            label: '附件类型',
            minWidth: '140'
          },
          {
            prop: 'attachmentName',
            label: '附件名称',
            minWidth: '140'
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '140'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            minWidth: '140'
          },
          {
            label: '操作',
            button: [
              {
                name: '预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '下载',
                clickFun: this.handleDownload,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }]
      },
      formData: {
        actualProcessResult: '', // 实际处理结果：整改、销售冻结、门店取缔
        actualReachTime: '', // 实际达成时间
        assessmentMeasures: '', // 未整改考核措施:：整改、销售冻结、门店取缔
        claimTime: '', // 要求整改时间
        constCode: '', // 门店建设号
        isEnd: 0,
        constSchedule: '', // 门店建设进度
        customerBanTime: '', // 客户取缔时间
        customerBizState: '', // 客户营业状态
        customerCode: '', // 所属客户编码
        customerName: '', // 所属客户名称
        customizeSaleFreeze: 0, // 定制销售冻结：0否1是
        dataSource: '', // 数据来源：BPM、 SLM
        dheadPicArea: 0, // 预计门头报图面积
        expectOpenTime: '', // 预计开业时间
        followFeedback: '', // 跟进情况反馈
        id: '',
        isNotice: 0, // 是否下达整改通知0否1是
        noticeCode: '', // 整改通知编号
        noticeIssuedTime: '', // 整改通知下发时间
        officeCode: '', // 所属办事处编码
        officeName: '', // 所属办事处名称
        proSaleFreeze: 0, // 成品销售冻结：0否1是
        processInstanceNo: '', // 流程实例号
        reason: '', // 整改原因
        rectifyCode: '', // 门店整改编号
        shopAttachmentAndTemplateDTOS: [],
        shopAttachmentDTOList:	[],
        shopBizState: '', // 门店营业状态
        shopClosedTime: '', // 门店停业时间
        shopCode: '', // 门店编码
        shopName: '', // 门店名称
        shopPicArea: 0, // 预计卖场报图面积
        sponsorNo: '', // 整改发起人编码
        sponsorPhone: '', // 整改发起人电话
        sponsorType: ''// 发起人类型：客户经理、渠道跟进、公司政策
      }
    }
  },
  created() {
    if (this.id) {
      this.dataLoading = true
      this.getFiles()
      queryById(this.id).then(res => {
        if (res.success === 1) {
          this.formData = res.data
          this.dataLoading = false
        }
      }).catch(() => {})
      this.dataLoading = false
    }
  },
  methods: {
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handleDownload(file) {
      const a = document.createElement('a')
      const url = `/pdf-file/` + file.attachmentUrl
      const fileName = file.attachmentName
      a.href = url
      a.download = fileName
      a.click()
    },
    handlePreview(file) {
      this.previewImg = ''
      const typeName = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()

      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        let picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        if (file.attachmentUrl.indexOf('http') !== -1) {
          const url = file.attachmentUrl.split('cn')
          picUrl = process.env.VUE_APP_BPMPIC_PREFIX + url[url.length - 1]
        }
        this.previewImg = picUrl
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        // word,excel预览
        // const newFileUrl = encodeURIComponent(this.url + file.attachmentUrl)
        if (file.attachmentUrl.indexOf('http') === -1) {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
        } else {
          window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + file.attachmentUrl)
        }
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.fileData = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
